<template>
  <div class="app-main">
    <div class="search-box">
      <el-form :inline="true" size="mini" :model="listParams" ref="searchForm">
        <search-form-box :show-more-btn="false">
          <template slot="showSearch">
            <el-form-item label="收款人" prop="receiver">
              <el-input v-model="listParams.receiver" placeholder="收款人" clearable></el-input>
            </el-form-item>
            <el-form-item label="金额" prop="amount_min">
              <el-input v-model="listParams.amount_min" placeholder="金额最小值" clearable></el-input>
            </el-form-item>
            <el-form-item label="至" prop="amount_max">
              <el-input v-model="listParams.amount_max" placeholder="金额最大值" clearable></el-input>
            </el-form-item>
            <!--            <el-form-item label="是否核销" prop="write_off">-->
            <!--              <el-radio-group v-model="listParams.write_off">-->
            <!--                <el-radio :label="true">是</el-radio>-->
            <!--                <el-radio :label="false">否</el-radio>-->
            <!--              </el-radio-group>-->
            <!--            </el-form-item>-->
          </template>
          <template slot="searchBtn">
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </template>
        </search-form-box>
      </el-form>
    </div>
    <div class="table-box">
      <el-button v-if="!is_manage_page" type="primary" size="mini" style="margin-bottom: 10px" @click="showAdd"
                 v-permission="'expense_adv_charge_add'"
      >申请付款
      </el-button>
      <el-table :data="tableData" size="mini" border style="width: 100%" v-loading="tableLoading">
        <el-table-column v-if="is_manage_page" label="申请人" prop="real_name" width="150" align="center"
        ></el-table-column>
        <el-table-column label="收款人" prop="receiver" width="120" align="center"></el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.flow_status == 3" size="mini">审核中</el-tag>
            <el-tag v-else-if="scope.row.flow_status == 4" type="success" size="mini">已通过</el-tag>
            <el-tag v-else-if="scope.row.flow_status == 0" type="danger" size="mini">已保存</el-tag>
            <el-tag v-else-if="scope.row.flow_status == 2" type="warning" size="mini">被退回</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="金额" width="120" align="center">
          <template slot-scope="scope">
            <span>￥{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="冲抵状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.write_off_flow_status == 3" size="mini">审核中</el-tag>
            <el-tag v-else-if="scope.row.write_off_flow_status == null" type="danger" size="mini">未冲抵</el-tag>
            <el-tag v-else-if="scope.row.write_off_flow_status == 4" type="success" size="mini">已通过</el-tag>
            <el-tag v-else-if="scope.row.write_off_flow_status == 2" type="warning" size="mini">被退回</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="事由" min-width="300" header-align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button  @click="look(scope.row)" type="primary" size="mini">查看</el-button>
            <el-upload size="mini" v-if="scope.row.flow_status == 4 && scope.row.write_off_flow_status == null" :action="upFileUrl"
                       :show-file-list="false" style="display: inline-block;margin-left: 10px" :headers="uploadHeaders"
                       :on-success="function (res,file){ return uploadSuccess(res,file,scope.row.id)}"
                       :before-upload="beforeUpload"
                       :on-error="uploadError"
            >
              <el-button size="mini" icon="el-icon-upload" type="danger">
                上传冲抵附件
              </el-button>
            </el-upload>
            <el-button v-if="scope.row.write_off_flow_status!= null" type="primary" size="mini"
                       @click="downLoad(scope.row.attach_file)"
            >查看冲抵附件
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.page"
                   :page-sizes="[10,20,50,100, 200,400]" :page-size="listParams.page_size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import SearchFormBox from '@/components/SearchFormBox'
import {
  upFileUrl
} from '@/api/others'
import { list } from '@/api/reimbursement/payment_apply/payment_apply'
import { saveAndBegin } from '@/api/reimbursement/write_off/write_off'
import { getToken } from '@/utils/auth'

export default {
  name: 'ExpenseAdvCharge',
  components: { SearchFormBox },
  data() {
    return {
      listParams: {
        receiver: null,
        amount_min: null,
        amount_max: null,
        flow_status: null,
        // write_off: null,
        page: 1,
        page_size: 10
      },
      upFileUrl,
      uploadHeaders: {},
      tableData: [],
      tableLoading: false,
      total: null
    }
  },
  computed: {
    is_manage_page() {
      return this.$route.name == 'expense_adv_charge'
    }
  },
  created() {
    this.listParams.manager_scenes = this.$route.name == 'expense_adv_charge'
    this.getList()
    if (getToken()) {
      this.uploadHeaders['Authorization'] = getToken()
    }
  },
  methods: {
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    getList() {
      this.tableLoading = true
      list(this.listParams).then(
        res => {
          if (res.code == 200) {
            this.tableLoading = false
            this.tableData = res.data.records
            this.total = res.data.total
          }
        }
      ).catch(() => {
        this.tableLoading = false
      })
    },
    search() {
      this.getList()
    },
    look(row) {
      let params = {}
      if (row.payment_write_off_id != null && row.write_off_flow_status != 4) {
        params.payment_write_off_id = row.payment_write_off_id
      } else {
        params.id = row.id
      }
      // payment_write_off_id
      this.$router.push(
        {
          name: row.write_off_flow_status == null ? 'expense_adv_charge_info' : 'write_off',
          params
        }
      )
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.getList()
    },
    showAdd() {
      this.$router.push(
        {
          name: 'expense_adv_charge_info',
          params: {
            is_created: true
          }
        }
      )
    },
    beforeUpload() {
      this.tableLoading = true
    },
    uploadError() {
      this.tableLoading = false
    },
    uploadSuccess(response, file, id) {
      saveAndBegin({ payment_id: id, attach_file: response.data }).then(
        res => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            this.getList()
          }
        }
      ).catch(() => {
        this.tableLoading = false
      })
    },
    downLoad(url) {
      window.open(url, '_blank')
    }
  }
}
</script>

<style scoped>
.app-main {
  padding: 0 20px;
}

.search-box {
  margin-top: 10px;
}

.table-box {
  margin-bottom: 20px;
}
</style>
